<template>
  <div class="root__mouse_star">
    <canvas ref="canvas" :width="stage.width.value" :height="stage.height.value"></canvas>
  </div>
</template>
<script lang="ts" setup>
import { useTemplateRef } from "vue";
import { Stage } from "./classes/Stage";

const FREQ_RENDER = 30; // 星星渲染频率（最低1）
const VELOCITY_DIM = 5; // 星星暗淡速率
const VELOCITY_MOVE = 5; // 星星移动速率
const COLORS = ["#f60", "#f06", "#0f6", "#06f", "#6f0", "#60f"];

const canvas = useTemplateRef("canvas");
const stage = new Stage(FREQ_RENDER, VELOCITY_DIM, VELOCITY_MOVE, COLORS);
stage.start(canvas);
</script>
<style scoped>
.root__mouse_star {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
}
canvas {
  position: absolute;
  inset: 0;
}
</style>
